<app-progress-bar></app-progress-bar>

<nz-layout class="app-layout">
  <nz-sider
    class="menu-sidebar"
    nzCollapsible
    [nzWidth]="isCollapsed ? 80 : 200"
    nzBreakpoint="md"
    [(nzCollapsed)]="isCollapsed"
    [nzTrigger]="null"
  >
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo" />
        <h1>Angular Design Pro</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <!--一级菜单-->
      <ng-container *ngFor="let menu of menus">
        <ng-template *ngIf="!menu.children || menu.children.length === 0">
          <li nz-menu-item nzMatchRouter>
            <a [routerLink]="menu.path">{{ menu.title }}</a>
          </li>
        </ng-template>
        <!--二级菜单-->
        <ng-container *ngIf="menu.children && menu.children.length > 0">
          <li nz-submenu nzOpen [nzTitle]="menu.title" [nzIcon]="menu.icon ? menu.icon : null">
            <ul>
              <ng-container *ngFor="let subMenu of menu.children">
                <li nz-menu-item nzMatchRouter *ngIf="!subMenu.children || subMenu.children.length === 0">
                  <a [routerLink]="subMenu.path">{{ subMenu.title }} </a>
                </li>
              </ng-container>
            </ul>
          </li>
        </ng-container>
      </ng-container>
    </ul>
  </nz-sider>
  <nz-layout class="app-main">
    <nz-header class="app-header">
      <span class="header-trigger" (click)="toggle()">
        <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
      </span>
    </nz-header>
    <nz-content class="app-content">
      <div class="main-content">
        <app-watermark></app-watermark>
        <!-- 子应用容器 -->
        <div id="ng-container"></div>
        <div id="react-container"></div>
        <div id="vue-container"></div>
        <router-outlet></router-outlet>
        <div *ngIf="$loading | async" class="page-loading">
          <div class="page-loading-content">
            <nz-spin nzSize="large"></nz-spin>
          </div>
        </div>
      </div>
    </nz-content>
    <!-- <nz-footer>Angular Design Pro ©2021 Implement By Angular</nz-footer> -->
  </nz-layout>
</nz-layout>
